<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="query">
        <Back label="选择设备" />
        <a-form layout="inline" class="query-form" :model="queryForm">
          <a-form-item>
            <a-input style="width: 280px" v-model="queryForm.nameStr" placeholder="支持多关键词检索，请用空格隔开" />
          </a-form-item>
          <a-form-item>
            <a-button class="submit" type="primary" @click="onSubmit">查询</a-button>
            <a-button>重置</a-button>
          </a-form-item>
        </a-form>
      </div>
      <a-tabs disabled v-model:activeKey="activeKey" @change="getData">
        <a-tab-pane key="1" tab="厂商">
          <div class="content1">
            <div class="item" :class="{ active: item.code == deep1.code }" @click="choose(item, '1')" v-for="(item, index) in data" :key="index">
              {{ item.name }}
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="品牌">
          <div class="content1">
            <div class="item" :class="{ active: item.code == deep2.code }" @click="choose(item, '2')" v-for="(item, index) in data" :key="index">
              {{ item.name }}
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="型号">
          <div class="content1">
            <div class="item" :class="{ active: item.code == deep3.code }" @click="choose(item, '3')" v-for="(item, index) in data" :key="index">
              {{ item.name }}
            </div>
          </div></a-tab-pane
        >
      </a-tabs>
      <div class="next">
        <a-button class="submit" @click="onNext">下一步</a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue';
  import Back from '/@/components/go-back/index.vue';
  import { useRoute, useRouter } from 'vue-router';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
  import { message } from 'ant-design-vue';
  let rzApplyStore = useRzApplyStore();
  const router = useRouter();
  const route = useRoute();
  const id = ref('');
  const bussNo = ref('');
  const deep1 = ref('');
  const deep2 = ref('');
  const deep3 = ref('');
  const queryForm = ref({
    nameStr: '',
  });
  const activeKey = ref('1');
  const data = ref([]);
  const onNext = () => {
    if (!deep1.value) {
      message.warning('请选择厂商');
      return;
    }
    if (!deep2.value) {
      message.warning('请选择品牌');
      return;
    }
    if (!deep3.value) {
      message.warning('请选择型号');
      return;
    }
    // 存 store
    rzApplyStore.setleaseHold({
      leaseSupplier: deep1.value.name,
      leaseBrand: deep2.value.name,
      leaseModel: deep3.value.name,
      bussNo: rzApplyStore.getBussNo,
    });
    alert(2)
    router.push({
      path: '/rzApply/device-config',
      query: {
        id: id.value,
      },
    });
  };
  async function getData() {
    const res = await rzApplyApi.getManufacturer({
      type: activeKey.value, //	1：厂商，2：品牌，3：型号
      nameStr: queryForm.value.nameStr,
      parentId: activeKey.value == 2 ? deep1.value.id : activeKey.value == 3 ? deep2.value.id : '',
    });
    if (res.code == 0) {
      data.value = res.data;
      if (id.value) {
        const info = rzApplyStore.getViewDeviceInfo;
        if (id.value) {
          if (activeKey.value == 1) {
            deep1.value = res.data.find((item) => item.code == info.leaseSupplierCode);
          } else if (activeKey.value == 2) {
            deep2.value = res.data.find((item) => item.code == info.leaseBrandCode);
          } else {
            deep3.value = res.data.find((item) => item.code == info.leaseModelCode);
          }
        }
      }
    }
  }
  function choose(item, key) {
    if (key == 1) {
      deep1.value = item;
      deep2.value = '';
      deep3.value = '';
    } else if (key == 2) {
      deep2.value = item;
      deep3.value = '';
    } else {
      deep3.value = item;
    }
  }
  onMounted(() => {
    const query = route.query;
    id.value = query.id;
    bussNo.value = query.bussNo;
    getData();
    if (query.id) {
      const info = rzApplyStore.getViewDeviceInfo;
      console.log(info,'info');
      deep1.value = {
        name: info.leaseSupplierCode,
        code: info.leaseSupplierCode,
      };
      deep2.value = { name: info.leaseBrandCode, code: info.leaseBrandCode };
      deep3.value = { name: info.leaseModelCode, code: info.leaseModelCode };
    }
  });
</script>
<style scoped lang="less">
  @import url(./index.less);
  .app-page {
    display: flex;
    flex-direction: column;
    .query {
      width: 100%;
      display: flex;
      padding: 24rem;
      box-sizing: border-box;
      justify-content: space-between;

      .form {
        float: 1;
        display: flex;
      }
    }
    /deep/ .ant-tabs {
      padding: 0 20rem;
      box-sizing: border-box;
      .ant-tabs-nav::before {
        background: #fc5451 !important;
      }
      .ant-tabs-nav-list {
        width: 100%;
        .ant-tabs-tab-active {
          background: #fc5451;
          .ant-tabs-tab-btn {
            color: #fff !important;
            text-align: center;
          }
        }
        .ant-tabs-tab {
          width: calc(100% / 3);
          justify-content: center;
          .ant-tabs-tab-btn {
            color: #fc5451;
          }
        }
      }
      .ant-tabs-ink-bar {
        background-color: #fc5451 !important;
      }
    }

    .content1 {
      padding: 1rem 0 0 0;
      display: flex;
      flex-wrap: wrap;
      align-items: start;
      justify-content: flex-start;
      .item {
        width: calc(25% - 15px);
        height: 71px;
        cursor: pointer;
        line-height: 71px;
        font-size: 18px;
        color: #000000;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 0 23px;
        text-align: center;
        box-sizing: border-box;
        &:nth-child(4n) {
          margin-right: 0;
        }
        &:hover {
          background: #eb5f18;
          box-shadow: 0px 0px 15px 0px rgba(239, 51, 48, 0.28);
          color: #fff;
        }
      }
      .active {
        background: #eb5f18;
        box-shadow: 0px 0px 15px 0px rgba(239, 51, 48, 0.28);
        color: #fff;
      }
    }
  }
</style>
